<template>
  <div class="yuan">
    <div class="bian">
      <div :class="{ cicle: isChecked }">√</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "CheckButton",
  props: {
    isChecked: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped>
.cicle {
  width: 100%;
  height: 100%;
  text-align: center;
  /* line-height: 20px; */
  color: #fff;
  border-radius: 50%;
  background-color: pink;
}
.bian {
  width: 20px;
  height: 20px;
  border: 1px solid #777;
  background-color: #fff;
  border-radius: 50%;
}

.yuan {
  margin-left: 3px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  margin-right: 3px;
  flex: 0.5;
  vertical-align: middle;
  color: #fff;
}
</style>